<!--  电厂信息页面 -->
<style>
#measureInfo {
	height: 300px;
}

#dbgrid {
	height: 300px;
}
</style>
<script>
	$(function() {
		$('#dbgrid').DataTable({
			"autoWide" : true,
			"ordering" : false,
			"searching" : false,
			"paging" : false,
			"info" : false,
			"columnDefs" : [ {
				"title" : "遥测量名称",
				"targets" : 0
			}, {
				"title" : "量  值",
				"targets" : 1
			}, {
				"title" : "刷新时间",
				"targets" : 2
			}, {
				"title" : "数据日合格率（%）",
				"targets" : 3
			} ],
			"ajax" : "${s.base}/res/testData/array.txt",
			"columns" : [ {
				"data" : "name"
			}, {
				"data" : "position"
			}, {
				"data" : "office"
			}, {
				"data" : "extn"
			}

			]
		});
		//=

		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('signalTrends'));

		// 指定图表的配置项和数据
		function randomData() {
			now = new Date(+now + oneDay);
			value = value + Math.random() * 21 - 10;
			value1 = value1 + Math.random() * 22 - 5;
			return {
				time : now.format("yyyy/MM/dd hh:mm:ss"),// now.toString(),
				val : Math.round(value),
				val1 : Math.round(value1)
			/*    
			   value: [
			       [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
			       Math.round(value),
			       Math.round(value+100)
			   ] */
			}
		}
		var axis_time = []
		var P_all = [];//发电量
		var P_single = []; //功率
		var now = +new Date(1997, 9, 3);
		var oneDay = 24 * 3600 * 1000;
		var value = Math.random() * 1000;
		var value1 = Math.random() * 100;
		for (var i = 0; i < 1000; i++) {
			var d = randomData();
			axis_time.push(d.time);
			P_all.push(d.val);
			P_single.push(d.val1);
		}

		option = {
			title : {
				text : '发电趋势'
			},
			tooltip : {
				trigger : 'axis',
				/*      formatter: function (params) {
				         params = params[0];
				         var date = new Date(params.name);
				         return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
				     }, */
				axisPointer : {
					animation : false
				}
			},
			legend : {
				data : [{
	                name:'累计发电量',
	                icon : 'bar',
	                textStyle:{fontWeight:'bold', color:'green'}
	            },  {
	                name:'功率',
	                icon : 'line',
	                textStyle:{fontWeight:'bold', color:'green'}
	            }   ]
			},
			grid : {
				left : '3%',
				right : '4%',
				bottom : '3%',
				containLabel : true
			}
			/*     'value' 数值轴，适用于连续数据。
			 'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
			 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
			 'log' 对数轴。适用于对数数据。 */
			,
			xAxis : {
				type : 'category',//'category'
				splitLine : {
					show : false
				},

				data : axis_time,
			},
			yAxis : [ {
				name : '累计发电量',
				type : 'value',
				boundaryGap : [ 0, '100%' ],
				splitLine : {
					show : false
				}
			}, {
				name : '功率',
				type : 'value',
				boundaryGap : [ 0, '100%' ],
				splitLine : {
					show : false
				}
			} ],
			series : [ {
				name : '累计发电量',
				type : 'line',
				showSymbol : false,
				hoverAnimation : false,
				areaStyle : {
					normal : {}
				},
				itemStyle : {
					normal : {
						areaStyle : {
							type : 'default'
						}
					}
				},
				//   areaStyle: {normal: {areaStyle: {type: 'default'}}},
				data : P_all
			}, {
				name : '功率',
				type : 'line',
				showSymbol : false,
				hoverAnimation : false,
				yAxisIndex : 1,
				itemStyle : {
					normal : {
						areaStyle : {
							type : 'default'
						}
					}
				},
				data : P_single
			} ]
		};
 
		/*    setInterval(function () {

		 for (var i = 0; i < 5; i++) {
		 P_single.shift();
		 P_all.shift();
		 axis_time.shift();
		 var d=randomData();
		 axis_time .push(d.time);
		 P_all.push(d.val);
		 P_single .push(d.val1);
		 }

		 myChart.setOption({
		 xAxis:{ 
		 data:axis_time
		 } ,
		 series: [ {
		 data: P_all  
		 } , {
		 data: P_single  
		 }]
		 });
		 }, 1000);   */

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	});
</script>


<div class="npanel ">
	<div class="title">
		<div class="tabPageTitle">

			<div class="item">遥测</div>
			<div class="item">遥信</div>
			<div class="item">遥脉</div>
			<div class="item active">通道状态</div>
		</div>
	</div>


	<div class="content">
		<table id="dbgrid">
		</table>

	</div>

</div>





<!--  -->

<div class="npanel  trends">
	<div class="content" id="signalTrends"></div>
</div>

<!--  -->

<div class="npanel ">
	<div class="content">

		<ul class="iteminfo">
			<li class="item">
				<div class="name">概况信息</div>
				<div class="val">3.265</div>
				<div class="dval">V</div>
			</li>
			<li class="item">
				<div class="name">概况信息</div>
				<div class="val">3.265</div>
				<div class="dval">V</div>
			</li>
			<li class="item">
				<div class="name">概况信息</div>
				<div class="val">3.265</div>
				<div class="dval">V</div>
			</li>
			<li class="item">
				<div class="name">概况信息</div>
				<div class="val">3.265</div>
				<div class="dval">V</div>
			</li>
			<li class="item">
				<div class="name">概况信息</div>
				<div class="val">3.265</div>
				<div class="dval">V</div>
			</li>
			<li class="item">
				<div class="name">概况信息</div>
				<div class="val">3.265</div>
				<div class="dval">V</div>
			</li>
		</ul>

	</div>

</div>
